<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#gg {
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>
		<div id="gg" style="background: red;">
			Simba
		</div>
		<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
		<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var arr = ["red", "green", "yellow", "orange"]
			var index = 1
			var timer = -1

			function move() {
				timer = setInterval(function() {
					$("#gg").css("background", arr[index++])
					if(index === arr.length) index = 0
				}, 1000)
			}
			move()
			$("#gg").tap(function() {
				console.log("触摸了")
			}).swipeLeft(function() {
				clearInterval(timer)
				$("#gg").css("background", arr[--index])
				move()
			}).swipeRight(function() {
				clearInterval(timer)
				$("#gg").css("background", arr[++index])
				move()
			}).swipeUp(function() {
				console.log("上滑动了")
			}).swipeDown(function() {
				console.log("下滑动了")
			})

			var gg = $("#gg")[0]

			var oldx = 0
			gg.ontouchstart = function(e) {
				oldx = e.touches[0].clientX
				console.log("按下")
			}
			gg.ontouchend = function(e) {
				console.log("抬起", e)
			}
			gg.ontouchmove = function(e) {
				console.log("移动", e.touches[0].clientX - oldx)
			}
		</script>
	</body>

</html>